<template>
  <div class="export-resume">
    <div class="header">
      <h2>导出简历</h2>
      <p class="subtitle">将您的简历导出为不同格式</p>
    </div>

    <div class="content">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-card class="export-options">
            <template #header>
              <h3>导出选项</h3>
            </template>
            
            <div class="format-selection">
              <h4>选择导出格式</h4>
              <el-radio-group v-model="exportFormat" class="format-group">
                <el-radio label="pdf" class="format-option">
                  <div class="format-content">
                    <el-icon size="24" color="#ff6b6b"><Document /></el-icon>
                    <div class="format-info">
                      <h5>PDF格式</h5>
                      <p>适合打印和电子投递，格式稳定</p>
                    </div>
                  </div>
                </el-radio>
                
                <el-radio label="word" class="format-option">
                  <div class="format-content">
                    <el-icon size="24" color="#4ecdc4"><Edit /></el-icon>
                    <div class="format-info">
                      <h5>Word文档</h5>
                      <p>可编辑格式，方便进一步修改</p>
                    </div>
                  </div>
                </el-radio>
                
                <el-radio label="markdown" class="format-option">
                  <div class="format-content">
                    <el-icon size="24" color="#45b7d1"><Code /></el-icon>
                    <div class="format-info">
                      <h5>Markdown</h5>
                      <p>纯文本格式，适合程序员</p>
                    </div>
                  </div>
                </el-radio>
              </el-radio-group>
            </div>

            <div class="export-settings">
              <h4>导出设置</h4>
              <el-form :model="exportSettings" label-width="120px">
                <el-form-item label="页面大小">
                  <el-select v-model="exportSettings.pageSize">
                    <el-option label="A4" value="a4" />
                    <el-option label="Letter" value="letter" />
                  </el-select>
                </el-form-item>
                
                <el-form-item label="页边距">
                  <el-select v-model="exportSettings.margin">
                    <el-option label="标准 (2.5cm)" value="normal" />
                    <el-option label="紧凑 (1.5cm)" value="compact" />
                    <el-option label="宽松 (3.5cm)" value="wide" />
                  </el-select>
                </el-form-item>
                
                <el-form-item label="字体大小">
                  <el-slider v-model="exportSettings.fontSize" :min="10" :max="16" show-stops show-input />
                </el-form-item>
                
                <el-form-item label="包含照片">
                  <el-switch v-model="exportSettings.includePhoto" />
                </el-form-item>
                
                <el-form-item label="颜色模式">
                  <el-radio-group v-model="exportSettings.colorMode">
                    <el-radio label="color">彩色</el-radio>
                    <el-radio label="grayscale">灰度</el-radio>
                    <el-radio label="blackwhite">黑白</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>

            <div class="export-actions">
              <el-button type="primary" @click="exportResume" :loading="exporting" size="large">
                <el-icon><Download /></el-icon>
                导出简历
              </el-button>
              <el-button @click="previewExport" :loading="previewing">
                <el-icon><View /></el-icon>
                预览效果
              </el-button>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="12">
          <el-card class="preview-card">
            <template #header>
              <h3>导出预览</h3>
            </template>
            
            <div class="preview-container">
              <div class="preview-page" :style="previewStyle">
                <div class="preview-content">
                  <div class="preview-header">
                    <h2>张三</h2>
                    <p>高级Java开发工程师</p>
                  </div>
                  
                  <div class="preview-contact">
                    <p>📧 zhangsan@example.com</p>
                    <p>📱 138-0000-0000</p>
                    <p>📍 北京市朝阳区</p>
                  </div>
                  
                  <div class="preview-section">
                    <h4>个人简介</h4>
                    <p>5年Java开发经验，熟练掌握Spring生态系统...</p>
                  </div>
                  
                  <div class="preview-section">
                    <h4>工作经历</h4>
                    <div class="preview-item">
                      <h5>高级Java工程师 - ABC科技公司</h5>
                      <p class="duration">2020-2023</p>
                      <p>负责核心业务系统的开发和维护...</p>
                    </div>
                  </div>
                  
                  <div class="preview-section">
                    <h4>教育背景</h4>
                    <div class="preview-item">
                      <h5>计算机科学与技术 - XYZ大学</h5>
                      <p class="duration">2016-2020</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="preview-info">
              <p><strong>格式：</strong>{{ getFormatName(exportFormat) }}</p>
              <p><strong>页面：</strong>{{ exportSettings.pageSize.toUpperCase() }}</p>
              <p><strong>字体：</strong>{{ exportSettings.fontSize }}px</p>
            </div>
          </el-card>
          
          <el-card class="tips-card">
            <template #header>
              <h3>💡 导出提示</h3>
            </template>
            
            <div class="tips">
              <div class="tip-item">
                <h5>PDF格式</h5>
                <p>• 适合在线投递和打印<br>• 在所有设备上显示一致<br>• 文件较小，传输方便</p>
              </div>
              
              <div class="tip-item">
                <h5>Word格式</h5>
                <p>• 可以进一步编辑修改<br>• HR习惯的文档格式<br>• 支持批注和修订</p>
              </div>
              
              <div class="tip-item">
                <h5>Markdown格式</h5>
                <p>• 纯文本格式，体积小<br>• 适合程序员岗位<br>• 可以版本控制</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

const exportFormat = ref('pdf')
const exporting = ref(false)
const previewing = ref(false)

const exportSettings = reactive({
  pageSize: 'a4',
  margin: 'normal',
  fontSize: 12,
  includePhoto: true,
  colorMode: 'color'
})

const previewStyle = computed(() => {
  const scale = exportSettings.pageSize === 'a4' ? 1 : 1.1
  return {
    transform: `scale(${scale})`,
    fontSize: `${exportSettings.fontSize}px`,
    filter: exportSettings.colorMode === 'grayscale' ? 'grayscale(100%)' : 
            exportSettings.colorMode === 'blackwhite' ? 'grayscale(100%) contrast(200%)' : 'none'
  }
})

const getFormatName = (format) => {
  const formats = {
    pdf: 'PDF文档',
    word: 'Word文档',
    markdown: 'Markdown文档'
  }
  return formats[format] || format
}

const exportResume = async () => {
  exporting.value = true
  try {
    // TODO: 调用导出API
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    // 模拟下载
    const fileName = `简历_${new Date().getTime()}.${exportFormat.value === 'word' ? 'docx' : exportFormat.value}`
    ElMessage.success(`正在下载：${fileName}`)
    
    // 这里应该触发实际的文件下载
    // const blob = new Blob([fileContent], { type: mimeType })
    // const url = URL.createObjectURL(blob)
    // const a = document.createElement('a')
    // a.href = url
    // a.download = fileName
    // a.click()
    
  } catch (error) {
    ElMessage.error('导出失败，请重试')
  } finally {
    exporting.value = false
  }
}

const previewExport = async () => {
  previewing.value = true
  try {
    // TODO: 生成预览
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('预览已更新')
  } catch (error) {
    ElMessage.error('预览失败')
  } finally {
    previewing.value = false
  }
}
</script>

<style scoped>
.export-resume {
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h2 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 28px;
}

.subtitle {
  color: #666;
  font-size: 16px;
  margin: 0;
}

.export-options,
.preview-card,
.tips-card {
  margin-bottom: 20px;
}

.format-selection h4,
.export-settings h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
}

.format-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.format-option {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: all 0.3s;
}

.format-option:hover {
  border-color: #409eff;
  background: #f8f9ff;
}

.format-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.format-info h5 {
  margin: 0 0 5px 0;
  color: #333;
  font-size: 16px;
}

.format-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.export-settings {
  margin: 30px 0;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.export-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
}

.preview-container {
  height: 500px;
  overflow: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
}

.preview-page {
  width: 210px;
  min-height: 297px;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform-origin: top;
  transition: all 0.3s;
}

.preview-content {
  padding: 20px;
  font-size: 12px;
  line-height: 1.5;
}

.preview-header h2 {
  margin: 0 0 5px 0;
  font-size: 18px;
  color: #333;
}

.preview-header p {
  margin: 0 0 15px 0;
  color: #666;
  font-size: 14px;
}

.preview-contact {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ddd;
}

.preview-contact p {
  margin: 3px 0;
  font-size: 12px;
  color: #666;
}

.preview-section {
  margin-bottom: 20px;
}

.preview-section h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #409eff;
  border-bottom: 1px solid #409eff;
  padding-bottom: 3px;
}

.preview-section p {
  margin: 0;
  font-size: 12px;
  color: #333;
}

.preview-item {
  margin-bottom: 15px;
}

.preview-item h5 {
  margin: 0 0 3px 0;
  font-size: 13px;
  color: #333;
}

.duration {
  color: #999;
  font-size: 11px;
  margin: 0 0 5px 0;
}

.preview-info {
  margin-top: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
}

.preview-info p {
  margin: 0 0 5px 0;
  font-size: 14px;
  color: #666;
}

.preview-info p:last-child {
  margin-bottom: 0;
}

.tips {
  color: #666;
}

.tip-item {
  margin-bottom: 20px;
}

.tip-item h5 {
  margin: 0 0 8px 0;
  color: #409eff;
  font-size: 14px;
}

.tip-item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}
</style> 